<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"></meta>
		<meta content="width=device-width,initial-scale=1" name="viewport">
		<title>双向绑定</title>
	</head>
	<body>
        <input id="inputid" ><button onclick="p()">将左侧的内容用proxy代理</button>
        <br/>
        <button onclick="get()">获取被代理的值</button>
        <br/>
        <input id="newval" ><button onclick="set()">将左侧的内容设置为新值</button>
	</body>
</html>
<script>
function proxyObj(target){
    return new Proxy(target,{
        get(obj,prop){
            console.log(obj,prop) //每次获取属性 进行一次打印
            return obj[prop]
        },
        set(obj, prop, value){
            console.log("this is set method")
            // console.log(obj,prop,value)
            obj[prop] = value
            return
        },
    })
}
let obj = {}
let obj_proxy
function p(){
    obj.value = document.getElementById("inputid").value  // 注意proxy 只能代理object类型
    obj_proxy = proxyObj(obj)
    console.log("代理成功")
}

function get(){
    console.log(obj_proxy.value)
}

function set(){
    obj_proxy.value = document.getElementById("newval").value
}

</script>